<template>
    <section>
        <navbar :title="$t('h_title.huodongxiangqing')" :right_show="false" :type="1"></navbar>
        <section id="huodong">
            <section class="huodong" v-if="huodong">
                <img :src="url + huodong.title_img" class="img1" alt="">
                <h4>{{huodong.title}}</h4>
                <h5>{{huodong.created_at}}&nbsp;&nbsp;&nbsp;&nbsp;{{huodong.date_desc}}</h5>
                <section v-html="huodong.rule_content">

                </section>

                <!-- <button @click="shenqing">{{$t('dailizhongxin.shenqinghuodong')}}</button> -->
            </section>
        </section>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    export default {
        name: "huodong",
        components: {
            navbar
        },
        data() {
            return {
                huodong: [],
                url: this.$https.baseUrl,
                id: this.$route.query.id
            }
        },
        mounted() {
            this.onLoad()
        },
        methods: {
            onLoad() {
                this.$https.fetchGet('/m/activity_detail',{'id': this.id}).then( res => {
                    let data = res.data
                    this.huodong = data.data
                })
            },
            shenqing(){
                this.$https.fetchPost('/member/apply_activity',{'activity_id': this.id}).then( res => {
                    this.$toast(res.status.msg)
                })
            }
        }
    }
</script>

<style lang="less">
    #huodong{
        padding: 0 .3rem;
        .huodong{
            padding: .3rem 0;
            margin-bottom: .3rem;
            & > img{
                width: 100%;
                height: 3rem;
            }
            & > h4{
                color: #fff;
                font-size: .34rem;
                text-align: left;
                background: linear-gradient(#2c3134, #24292c);
                padding: .3rem .4rem;
                border-radius: .1rem;
                margin-bottom: .3rem;
            }
            & > h5{
                margin-top: .2rem;
                font-size: .34rem;
                color: #fff;
            }
            & > section{
                padding: .6rem 0 .3rem;
                color: #fff;
                font-size: .38rem;
                line-height: 1.6;
                text-align: left;
            }
            & > button{
                background: -webkit-gradient(linear, left top, left bottom, from(#eb5d4d), to(#fb2464)) !important;
                background: -webkit-linear-gradient(top, #eb5d4d 0%, #fb2464 100%) !important;
                background: -o-linear-gradient(top, #eb5d4d 0%, #fb2464 100%) !important;
                background: linear-gradient(to bottom, #eb5d4d 0%, #fb2464 100%) !important;
                width: 96%;
                margin: 0.1rem auto .2rem;
                color: #fff;
                line-height: 1.5rem;
                text-align: center;
                font-size: 0.42rem;
                display: block;
                border-radius: 0.2rem;
                border: none;
            }
        }
    }


</style>
